<template>
	<view class="wrapper">
		<uni-popup type="center" ref="prompt">
			<view class="sign-in-box">
				<view class="title">登录系统打球</view>
				<view class="sub-title">获取视频解锁券</view>
				<view class="date-box">
					<view class="top-tips">
						每7天累计扫码登陆打球4天
						<view class="sub-top-tips">
							即可获得视频解锁券
						</view>
					</view>
					<view class="seven-days">
						<view class="day-box" v-for="(item, index) in dates" :key="index">
							<view class="day">
								<view class="month-text">{{item.month}}月</view>
								<view class="day-text">{{item.day}}号</view>
							</view>
						</view>
					</view>
					<view class="bottom-tips">再扫码登录4天，即可获取视频解锁券</view>
					<view class="know-btn" @click="iKnow()">我知道了</view>
					<view class="detail-event" @click="toActivities()">活动详情</view>
				</view>
			</view>
			<view class="prompt-close">
			    <image src="../static/images/prompt-close.png" mode="aspectFit" class="prompt-close-img" @click="closePromptPop"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'dailySignIn',
	    data () {
	        return {
				showNoticePrompt: false,
				token: '',
				dates: [],
	        }
	    },
        props:{
			
		},
		watch: {
			showNoticePrompt(newVal, oldVal){
				if(newVal) {
					this.$refs.prompt.open();
				}
			}
		},
	    created(){
	
	    },
	    mounted(){
			//this.$refs.prompt.open();
			const lastShownDate = uni.getStorageSync('lastShownDate');
			// 如果没有保存或者日期已经过期，则弹出弹框
			if (!lastShownDate || new Date(lastShownDate).getDate() !== new Date().getDate()) {
			    this.showPromptPop();
			}
			this.getSevenDaysDates();
	    },
	    methods: {
			// 服务器判断此前有无签到记录，如果是第一次就已当天打卡为开始记录7天，从而返回开始到结束的7天区间。
			// 前端传打卡日期，后端记录次数，如果未到7天提前打满4天则更换下一轮7天（7天内，如果打卡已经4次，则更换下一个7天，重新打卡。），
			// 如果已无机会（剩余天数+已过天数的已打卡天数，结果小雨4的话就展示下一个7天，重新打卡。），
			// 重新打卡的节点后端判断用户是否完成上一轮打卡，打完或没打完都算完成一轮。
			// 问题1，是否扫码进入才算签到，普通进入小程序不算
			// 问题2，前端计算，每天只弹一次
			getSevenDaysDates() { //前端计算今天起到7天内，实际要从后端获取
				const today = new Date();
				for (let i = 0; i < 7; i++) {
					const date = new Date(today);
					date.setDate(today.getDate() + i);
					const month = (date.getMonth() + 1).toString().padStart(2, '0');
					const day = date.getDate().toString().padStart(2, '0');
					this.dates.push({
						month: `${month}`, 
					    day: `${day}`
					});
				}
			},
			showPromptPop() {
				// 显示弹框
				this.$refs.prompt.open();
				// 更新localStorage中的状态和日期信息
				uni.setStorageSync('lastShownDate', new Date().toString());
			},
			closePromptPop(){
				this.$refs.prompt.close();
			},
			toActivities() {
				uni.navigateTo({
					url: 'pages/myService/activities'
				});
			},
			iKnow() {
				this.closePromptPop();
			},
	    }
	}
</script>

<style scoped lang="scss"> 
    .wrapper{
		width: 100%;
		.sign-in-box{
			width: 92vw;
			// height: 750upx;
			background: #69a2f5;
			border-radius: 20upx;
			padding: 20upx;
			.title{
				margin-left: 20upx;
				font-size: 56upx;
				color: #fff;
			}
			.sub-title{
				margin-left: 20upx;
				font-size: 40upx;
				color: #fff;
			}
			.date-box{
				background: #eff8ff;
				border-radius: 40upx;
				margin-top: 20upx;
				padding: 20upx;
				.top-tips{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					font-size: 40upx;
					color: #69a2f5;
				}
				.seven-days{
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					.day-box{
						width: 25%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 10upx 0;
						.day{
							width: 80%;
							background: #cfe5fd;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							border-radius: 30upx;
							padding: 10upx 0;
							.month-text{
								font-size: 40upx;
							}
							.day-text{
								font-size: 36upx;
							}
						}
					}
				}
				.bottom-tips{
					display: flex;
					justify-content: center;
					color: #999;
				}
				.know-btn{
					margin: 20upx auto;
					width: 200upx;
					height: 70upx;
					line-height: 70upx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #69a2f5;
					color: #fff;
					border-radius: 50upx;
				}
				.detail-event{
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.prompt-close{
			margin-top: 40upx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.prompt-close-img{
				width: 50upx;
				height: 50upx;
			}
		}
	}
</style>